<template>
    <!-- 在父组件中直接引用子组件 没有传递属性 -->
    <!-- <PropsChild></PropsChild> -->
    <!-- 在父组件中引用子组件 并传递属性 -->
    <!-- <PropsChild msg="李焕英"></PropsChild>
    <PropsChild msg="生命一号"></PropsChild>
    <PropsChild msg="希望一号"></PropsChild>
    <PropsChild msg="神州20号"></PropsChild> -->
    <hr>
    <PropsChild @xx="btn_add"></PropsChild>
    <br>
    父组件中的计数值:{{ count }}
    <hr>
    <br>
    <!-- <div>
        <slot>
            <PropsChild title1="自定义标题" msg="自定义内容"></PropsChild>
        </slot>
    </div> -->
    <hr>
    <div>
        <slot>
            <PropsChild @push="handlePush" name="Alice" email="alice@example.com" :status="status"></PropsChild>
        </slot>
    </div>
    <hr>
    <div>
        <slot>
            <input type="button" :value="item.btnName" @click="btn_to(index)" v-for="(item, index) of items">
            <component :is="items[number].componentName"></component>

        </slot>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import PropsChild from './PropsChild.vue';
import Home from './Home.vue';
import Profile from './Profile.vue';
import Settings from './Settings.vue';
let number = ref(0)
let items = [
    { btnName: 'Home', componentName: Home },
    { btnName: 'Profile', componentName: Profile },
    { btnName: 'Settings', componentName: Settings },
]
function btn_to(idx) {
    number.value = idx
}
let count = ref(0)
function btn_add(number) {
    count.value = number
}
const status = ref(false); // 初始化 status

const handlePush = () => {
    status.value = true;  // 将状态更新为 true 以显示用户信息
};

</script>